<style>
	.ser_left{float: left;width: 310px; border: solid 1px #009E94; height: 300px;overflow-y:scroll; }
	.ser_left .search{margin: 5px;width: 280px;float: left;display: flex;}
	.ser_center{float: left; width: 50px;height: 300px;}
	.ser_right{float: left;width: 310px;border: solid 1px #009E94;height: 300px;overflow-y:scroll;}
	/*.btn:hover{color: #FFFFFF;}*/
	.btn {height: 28px;line-height: 28px;margin: 0px 25px 0;padding: 0px 15px;border: 1px solid #dedede;color: #FFFFFF;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;background: #5cb85c;border-color: ##5cb85c;}
    .line{width: 280px;margin: 5px;float: left;}
    .line_left{float: left;}
    .line_right{float: right;margin-right: 10px;}
    .line_left a{color: #000000;}
</style>
<form method="post" action="/oss/?r=matchCrossServerV/doAdd">
    <{include file='../common_params.tpl'}>

    <div class="box box-black">
        <div class="box-body">
            <table class="table table-bordered">
                <colgroup>
                    <col style="width: 10%;"></col>
                    <col style="width: 80%;"></col>
                </colgroup>
                
                <tr>
                    <th class="th-label">匹配跨服名称</th>
                    <td>
                        <input type="text" name="cross_server_name" class="form-control inline" value="" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">跨服结点名</th>
                    <td>
                        <input type="text" name="node_name" class="form-control inline" value="" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">开发ID</th>
                    <td>
                        <input type="text" name="develop_id" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">版本号</th>
                    <td>
                        <input type="text" name="version" class="form-control inline" placeholder="" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">服务器IP</th>
                    <td>
                        <input type="text" name="ip" class="form-control inline" value="" placeholder="IP" />
                        <input type="text" name="port" size="8" class="form-control inline" value="" placeholder="端口" />
                    </td>
                </tr>
                
                <tr>
                    <th class="th-label">配置</th>
                    <td>
                       <div class="ser_left">
                       	 <div class="search"><input type="text" placeholder="" name="search_name"/>&nbsp;<a href="javascript:;" id="search_match" class="btn">搜索</a></div>
                       	 <div class="setting">
                       	 <{foreach from=$otherInfoServer item=item key=key}>
                       	 <div class="line otherInfoServer">
                       	 	<div class="line_left"><a class="match" data-vid="<{$item.id}>" data-match-id="<{$item.match_id}>" data-server-id="<{$item.server_id}>"><{$item.server_name}> (<{$item.server_num}>) <{if $item.cross_server_name != '' }>(<{$item.cross_server_name}>)<{/if}>  </a></div>
                       	 	<div class="line_right"><a href="javascript:;" class="shift-in" class="btn">移入</a></div>
                       	 </div>
                       	 <{/foreach}> 
                       	 </div>
                       </div>
                       <div class="ser_center"></div>
                       <div class="ser_right">
                       	 <{foreach from=$infoServer item=item key=key}>
                       	 <div class="line infoServer">
                       	 	<div class="line_left"><a class="match" data-vid="<{$item.vid}>" data-match-id="<{$item.match_id}>" data-server-id="<{$item.id}>"><{$item.server_name}> (<{$item.server_num}>) (<{$info.cross_server_name}>)</a></div><!-- 最终得到vid，将关系表中vid的全删除，再将修改后关系重新添加 -->
                       	 	<div class="line_right"><a href="javascript:;" class="shift-out" class="btn">移出</a></div>
                       	 </div>
                       	 <{/foreach}>                      	 
                       </div>
                       <input type="hidden" name="vids" value=""/>
                       <input type="hidden" name="match_ids" value="" />
                       <input type="hidden" name="server_ids" value="" />
                    </td>
                </tr>
                
                


            </table>
        </div>

        <div class="box-footer">
            <a href="javascript:history.go(-1);" class="btn btn-default">返回</a>
            <button type="submit" name="sub" class="btn btn-default pull-right">保存</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    $(function(){
    	//搜索
    	$('#search_match').click(function(){
    		var search_name = $('input[name="search_name"]').val();
    		if(search_name == ''){
    			$(".otherInfoServer").show();
    		}else{
    			$(".otherInfoServer").hide();
    		    $(".otherInfoServer:contains("+search_name+")").show();
    		}
    	});
    	
    	//移入
    	$(document).on('click','.shift-in',function(){
    		var routine_num_addone = <{$crossList['match_manual_operation_num']}>;
    		var a = $(this).parent().parent().find('.line_left').html();
    		var html = '<div class="line infoServer">';
    		html += '<div class="line_left">';
    		html += a;
    		html += '</div>';
    		html += '<div class="line_right"><a href="javascript:;" class="shift-out" class="btn">移出</a></div>';
    		var length = $('.infoServer').length;
    		if(length >= routine_num_addone){
    			layer.alert('匹配跨服的服务器不能大于'+routine_num_addone+'个', {icon: 2, skin: 'layui-layer-molv'});
        		return false;
    		}
    		console.log(length);
    		$('.ser_right').append(html);
    		$(this).parent().parent().remove();
    	});
    	
    	//移出
        $(document).on('click','.shift-out',function(){
        	var a = $(this).parent().parent().find('.line_left').html();
    		var html = '<div class="line otherInfoServer">';
    		html += '<div class="line_left">';
    		html += a;
    		html += '</div>';
    		html += '<div class="line_right"><a href="javascript:;" class="shift-in" class="btn">移入</a></div>';
    		$('.ser_left').append(html);
        	$(this).parent().parent().remove();
    	});

    	$('button[name="sub"]').click(function(){  		           
        	var cross_server_name = $('input[name="cross_server_name"]').val();
        	if(cross_server_name == ''){
        		layer.alert('请填写匹配跨服名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var node_name = $('input[name="node_name"]').val();
        	if(node_name == ''){
        		layer.alert('请填写跨服节点名称', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var develop_id = $('input[name="develop_id"]').val();
        	if(develop_id == ''){
        		layer.alert('请填写开发ID', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var version = $('input[name="version"]').val();
        	if(version == ''){
        		layer.alert('请填写版本号', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var ip = $('input[name="ip"]').val();
        	if(ip == ''){
        		layer.alert('请填写IP', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var port = $('input[name="port"]').val();
        	if(port == ''){
        		layer.alert('请填写端口', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
        	}
        	
        	var vid_arr = new Array();
        	var match_id_arr = new Array();
        	var server_id_arr = new Array();
        	$(".infoServer .match").each(function(i){
                vid_arr[i] = $(this).attr('data-vid');
                match_id_arr[i] = $(this).attr('data-match-id');
                server_id_arr[i] = $(this).attr('data-server-id');
            });
            var vids = vid_arr.join(",");
            var match_ids = match_id_arr.join(",");
            var server_ids = server_id_arr.join(",");
            if(vids == '' || match_ids == ''){
            	layer.alert('请设置服务器', {icon: 2, skin: 'layui-layer-molv'});
            	return false;
            }
            $("input[name='vids']").val(vids);
            $("input[name='match_ids']").val(match_ids);
            $("input[name='server_ids']").val(server_ids);
            //console.log(vids); console.log(match_ids);console.log(server_ids);
        	//return false;
        });
    });
    

    
    
</script>